<template>
  <div ref="root" class="scroll">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, onBeforeUnmount, onMounted, ref, useTemplateRef} from 'vue'
import _ from "lodash";
import "overlayscrollbars/overlayscrollbars.css";
import {ClickScrollPlugin, OverlayScrollbars, ScrollbarsHidingPlugin, SizeObserverPlugin} from "overlayscrollbars";
import ArkScrollOptionsDefault, {ArkScrollOptions} from "./ArkScrollOptions";

OverlayScrollbars.plugin([
  SizeObserverPlugin,
  ClickScrollPlugin,
  ScrollbarsHidingPlugin,
]);

/** 组合（向选项里合并 property）。包括：provide、inject、extends、mixins */
const props = defineProps<ArkScrollOptions>();

/** 本地状态 (本地的响应式 property)。包括：ref、computed、useTemplateRef */
const rootRef = useTemplateRef("root");

const osInstance = ref<OverlayScrollbars>(null);

/** 接口（组件的接口）。包括：defineExpose */

/** 事件（通过响应式事件触发的回调）。包括：watch */

/** 生命周期钩子（按照它们被调用的顺序）。包括：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted */
onBeforeMount(() => {
});

onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  destroy();
})

/** 非响应式的 property（不依赖响应系统的实例 property）。包括：常规函数 */
const init = () => {
  const element = rootRef.value;

  const options = _.defaultsDeep({}, props, ArkScrollOptionsDefault);
  osInstance.value = OverlayScrollbars(
    {
      target: element,
    },
    options,
  );
};
const destroy = () => {
  osInstance.value.destroy();
};

/** 其它 */
</script>

<style scoped lang="scss">
.scroll {
  overflow: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
</style>

<style>
[data-overlayscrollbars-padding],
[data-overlayscrollbars-viewport] {
  z-index: initial;
}
</style>